<template>
  <div>
    <router-view></router-view>
    <!--    分割线-->
    <el-divider></el-divider>
    <!--    标签-->
    <el-tabs type="border-card">
      <!--    用户查询列表-->
      <el-tab-pane label="用户">
        <!--    用户高级查询-->
        <el-form :inline="true" :model="systemUserForm" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="systemUserForm.parSelPlusData" placeholder="用户名/姓名/手机号码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="systemUserForm.userStatus" placeholder="用户状态">
              <el-option label="启用" value="Y"></el-option>
              <el-option label="禁用" value="N"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getSystemUser">查询</el-button>
          </el-form-item>
          <el-button type="primary" plain @click="insertSystemUser">添加用户</el-button>
        </el-form>
        <el-table
            :data="systemUserData"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="序号">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="用户名">
          </el-table-column>
          <el-table-column
              prop="userRealname"
              label="姓名">
          </el-table-column>
          <el-table-column
              prop="roleName"
              label="用户组">
          </el-table-column>
          <el-table-column
              prop="userStatus"
              :formatter="zhangtai"
              label="用户状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <el-button type="primary" plain>
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="selectUser(scope.row.id)">查看</el-dropdown-item>
                  <el-dropdown-item @click.native="updateUser(scope.row.id)">修改</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
<!--        fenye-->
        <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :page-sizes="[2, 4, 6, 8]"
            :total="pageData.total"
            :page-size="systemUserForm.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </el-tab-pane>

      <!--        角色查询列表-->
      <el-tab-pane label="角色">
        <!--    角色高级查询-->
        <el-form :inline="true" :model="systemRoleForm" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="systemRoleForm.roleName" placeholder="角色名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getSystemRole">查询</el-button>
          </el-form-item>
          <el-button type="primary" plain @click="insertSystemRole">添加角色</el-button>
        </el-form>
        <el-table
            :data="systemRoleData"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="序号">
          </el-table-column>
          <el-table-column
              prop="roleName"
              label="角色名称">
          </el-table-column>
          <el-table-column
              prop="roleText"
              label="角色描述">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <el-button type="primary" plain>
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="selectUpdateRole(scope.row.id)">查看/修改权限</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteRole(scope.row.id)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
<!--        分页-->
        <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :page-sizes="[2, 4, 6, 8]"
            :total="pageDataR.total"
            :page-size="systemRoleForm.pageNum"
            @size-change="handleSizeChangeR"
            @current-change="handleCurrentChangeR">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "SystemUser.vue",
  data() {
    return {
      pageData:{},// 存储返回的分页数据
      pageDataR:{},
      //查询表格
      systemUserData: [],
      systemRoleData: [],
      //用户高级查询列表值
      systemUserForm: {
        pageId:1,
        pageNum:2,
        parSelPlusData: '',
        userStatus: '',
        biaoshi: 1 //标识进入哪个get API
      },
      //角色高级查询列表值
      systemRoleForm:{
        pageId:1,
        pageNum:2,
        roleName:''
      }
    }
  },
  created() {
    this.getSystemRole();
    this.getSystemUser();

  },
  methods: {
    //用户高级查询
    getSystemUser() {
      this.$http.get('systemUser', {params: this.systemUserForm})
          .then((res) => {
            this.systemUserData = res.data.data.list;//查询出来的数据
            this.pageData = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //角色高级查询
    getSystemRole() {
      this.$http.get('systemRole', {params: this.systemRoleForm})
          .then((res) => {
            this.systemRoleData = res.data.data.list;
            this.pageDataR = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //绑定角色添加按钮
    insertSystemRole(){
      this.$router.push({name: 'SystemRoleInsert'})
    },
    //绑定用户添加按钮
    insertSystemUser() {
      //跳转添加页面
      this.$router.push({name: 'SystemUserInsert'})
    },
    //绑定用户修改按钮
    updateUser(id) {
      //跳转修改页面
      this.$router.push({name: 'SystemUserUpdate', params: {id: id}})
    },
    //绑定用户查看按钮
    selectUser(id) {
      //跳转查看页面
      this.$router.push({name: 'SystemUserSelect', params: {id: id}})
    },
    //绑定角色查看/修改按钮
    selectUpdateRole(id) {
      //跳转查看页面
      this.$router.push({name: 'SystemRoleInsert', params: {id: id}})
    },
    //删除角色
    deleteRole(id){
      this.$http.delete(`systemRole/${id}`)
          .then(
              this.$notify({
                type:"error",
                message:"已删除离职员工"
              }),
              this.getSystemRole()
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //几页
    handleCurrentChange(val) {
      this.systemUserForm.pageId = val;
      this.getSystemUser();
    },
    handleCurrentChangeR(val){
      this.systemRoleForm.pageId = val; //动态改变
      this.getSystemRole();
    },
    //每页显示几条数据
    handleSizeChange(val) {
      this.systemUserForm.pageNum= val;
      this.getSystemUser();
    },
    handleSizeChangeR(val){
      this.systemRoleForm.pageNum = val; //动态改变
      this.getSystemRole();
    },
    //用户状态
    zhangtai(row) {
      return row.userStatus == 'Y' ? "启用" : "禁用"
    }
  }
}
</script>

<style scoped>

</style>